[Day 21] 前端

第 12 屆 iThome 鐵人賽

DAY 21

Modern Web

用 Python 玩 PDF，結合Django 變成一個網頁系統系列第 21 篇

12th鐵人賽

Frank

2020-10-04 19:27:14

1228 瀏覽

分享至

昨天寫好後端API，前端來call api，用ajax來做，所以會用到jQuery。
jQuery 是一個好用的js套件，非常好用，但現在網頁系統開發模式改變，有新的框架，(Angular、React、Vue)，逐漸變成都使用這些前端框架的方式。

我是有點想用React，可是會跳進另一個坑，加上這個系統不大，就用jQuery吧。

那先加入 jQeury CDN。
main/main.html 加上script

...
<body>
...
<script
        src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
        crossorigin="anonymous"></script>
</body>

寫javascript，先加上form submit 的事件，再抓有勾選的行政區的checkbox，寫一個function call 後端的api，成功後，顯示一個連結，連結那個pdf
一定要寫在 jquery 下面
main/main.html

<body>
...
<script src="...jquery"></script>
<script>
    // call後端的api
    const reqExportPdfWeather = (selectedDistrictChxArr) => {
        $("#resultDiv").html("")
        const queryString = selectedDistrictChxArr.join('&')
        $.ajax({
            url: `/api/exportPdfWeather/?${queryString}`,
            processData : false,
            contentType : false,
            success: (res) => {
                $("#resultDiv").html("<a target='_blank' href='/media/未來鄉鎮天氣預報.pdf'>未來鄉鎮天氣預報</a>")
            }
        })
    }
    $(document).ready(() => {
        // 綁 submit 事件
        $(document).on("submit", "#form", (e) => {
            e.preventDefault();
            let selectedDistrictChxArr = []
           // 抓有checked的
           $('.districtChx[name=checkboxDistrict]:checked').each(function (i) {
                selectedDistrictChxArr.push(`locationNameList=${this.value}`)
             })
            reqExportPdfWeather(selectedDistrictChxArr)
        })
    })
</script>
</body>

就完成了
結果圖，點未來鄉鎮天氣預報會開新分頁，就會看到PDF